<template>
  <v-carousel
    v-model="model"
    height="370"
    interval="3000"
    cycle
  >
    <v-carousel-item v-for="(item, i) in list" :key="i">
      <div class="banner-inner">
        <h2>{{ item.title }}</h2>
        <img :src="item.image" alt="">
      </div>
    </v-carousel-item>
  </v-carousel>
</template>

<script>
import { listBanner } from '@/apis'

export default {
  name: 'Banner',
  data () {
    return {
      list: [],
      model: 0
    }
  },
  async created () {
    const { data } = await listBanner()
    this.list = data
  }
}
</script>

<style scoped lang="scss">
.banner-inner {
  width: 100%;
  height: 100%;
  position: relative;

  &::after {
    $bg: rgba(0, 0, 0, .2);
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient($bg 10%, transparent, $bg 90%);
  }

  h2 {
    position: absolute;
    bottom: 45px;
    left: 30px;
    font-weight: normal;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
